<!DOCTYPE html>
<html>

<head>
    <title>登录后创建会议</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../static/orderscreate/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/fileinput.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/form_builder/animate.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/form_builder/summernote.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../../static/system_setup/flow_cerate/css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/system_setup/flow_cerate/css/style.css">

    <link href="../../static/orderscreate/form_builder/style.min862f.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../static/orderscreate/css/index.css">
    <script src="../../static/system_setup/js/jquery-1.10.2.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap.min.js"></script>
    <script src="../../static/orderscreate/javascript/fileinput.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.data.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../static/orderscreate/javascript/zh.js"></script>
    <script src="../../static/orderscreate/javascript/jquery-ui.min.js"></script>
    <script src="../../static/orderscreate/form_builder/beautifyhtml.js"></script>
    <script src="../../static/orderscreate/javascript/index_update.js"></script>
    <style>
        .form-flow {
            display: inline-block;
            width: 100px;
            vertical-align: top;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }

        .form-flow-add-color {
            border-bottom: #00a0e9 solid 1px;
            color: #00a0e9;
        }

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }

        .add_background {
            background: #A9A9A9;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .search1 {
            width: 95%;
            display: flex;
            float: right;
            margin: 5.5px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search1 input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 29px;
            width: 77%;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }

        .search1 button {
            float: right;
            flex: 1;
            height: 29px;
            width: 23%;
            line-height: 29px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }

        .search1 button i {
            font-style: normal;
        }

        .search1 button:hover {
            font-size: 16px;
        }

        .add_background {
            background: #A9A9A9;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        :focus {
            outline: none;
        }

        input[type=text] {
            border: 1px solid #ccc;
        }

        input[type=text]:hover, input[type=text]:focus {
            border-color: #57bc80;
            box-shadow: none;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        body {
            padding: 50px;
            font-size: 12px;
        }

        .my-select-box {
            position: relative;
        }

        .my-select-box .my-select-input {
            height: 24px;
            line-height: 24px;
            padding: 0 5px;
            background: url() right center no-repeat;
            padding-right: 20px !important;
            width: 100%;
            box-sizing: border-box;
        }

        .my-select-box .my-select-list {
            position: absolute;
            left: 0;
            z-index: 101;
            border: 1px solid #ccc;
            border-top: none;
            max-height: 120px;
            overflow-y: auto;
            display: none;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
        }

        .my-select-box .my-select-list li {
            height: 22px;
            line-height: 22px;
            padding: 0 3px;
            cursor: pointer;
            margin-bottom: 1px
        }

        .my-select-box .my-select-list li.choosed {
            background: #ccc;
            color: #fff;
        }

        .my-select-box .my-select-list li:hover {
            background: #ccc;
            color: #fff;
        }

        .radio-inline_1{
            margin-top: 7px;
            padding-right: 20px;
        }
    </style>
</head>

<body style="background-color:#f7f5f6;padding: 0;">
<div style="width: 100%;height: 40px;line-height: 40px;border-bottom: #cfcfcf solid 1px;">
    <div id="flow-tab" class="form-flow">流程设计
    </div>
    <button type="submit" class="btn1" data-clipboard-text="testing" id="pop_page"
            style="float: right;height: 30px;margin-top: 5px;margin-right: 10px;background: #00a0e9;color: white;line-height: 10px;width: 70px;border: #00a0e9 solid 1px;border-radius: 3px"
    >保存
    </button>
</div>
<div id="new_models"
     style="width: 100%;height: 94%;position: absolute;display: none;background-color: rgba(36, 36, 36, 0.1);z-index: 10000;">
    <div id="box"
         style="width: 700px;height: 500px;background: white;z-index: 10100;position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #cfcfcf solid 1px;">
        <div style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom: #8c939d solid 1px;">
            <h5 id="model_title" class="modal-title"
                style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;"></h5>
            <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                    style="margin-right: 3%;line-height: 50px;">
                <span onclick="close_models()" aria-hidden="true" style="font-size: 14px;">✖</span>
            </button>
        </div>
        <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;border-bottom: #cfcfcf solid 1px;">
            <div style="display: inline-block;width: 30%;height: 100%;border-right: #E8E8E8 solid 1px;">
                <div style="width: 100%;height: 35px;color: #0b0b0b;text-align: center;">
                    <div class="search1" style="vertical-align: center;">
                        <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                        <button id="search_button">搜索</button>
                    </div>
                </div>
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;">
                    <div id="an_branch"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                        按部门
                    </div>
                    <div id="an_role"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按角色
                    </div>
                    <div id="an_staff"
                         style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按人员
                    </div>
                </div>
                <div id="department_list" style="width: 100%;height: 315px;overflow: auto;">
                    <div style="width: 100%;height: 100%;text-align: center;">
                        <img style="width: 30%;height: 30%;margin-top: 35%;"
                             src="../../static/public_file/images/jiazai.gif" alt="">
                    </div>
                </div>
            </div>

            <div id="right_role_li"
                 style="display: none;width: 69%;height: 100%;overflow: auto;vertical-align: top;left: 0;">

                <table class="table table-hover table-bordered"
                       style="border-collapse: collapse;margin: 0;padding: 0;">

                    <thead>
                    <tr>
                        <th scope="col" style="width: 10%;">
                            <input id="all_select_checkbox" type="checkbox">
                        </th>
                        <th scope="col" style="width: 20%;">序号</th>
                        <th scope="col" style="width: 35%;">姓名</th>
                        <th scope="col" style="width: 35%;">工号</th>
                    </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table2"></tbody>
                </table>
                <div id="img-display1" style="width: 75%;text-align: center;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>

            <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;display: none;">
                <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;">

                </div>
            </div>
        </div>
        <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
            <button id="model-affirm"
                    style="width: 100px;height: 36px;border: #dfdfdf solid 1px;margin-top: 7px;border-radius: 3px;">确认
            </button>
        </div>
    </div>
</div>

<div id="flow_design" class="container-fluid" style="padding:0; margin:0;">
    <div class="row-fluid clearfix">
        <div class="col-md-12 column">
            <div style="width:1080px; margin:0 auto; margin-top:20px;">
                <div class="conference-cont" style="height: 640px;">
                    <div class="wrapper wrapper-content">
                        <div class="row"
                             style="border-left: 2px dashed rgba(0,0,0,0.12);border-right: 2px dashed rgba(0,0,0,0.12);border-bottom: 2px dashed rgba(0,0,0,0.12);">

                            <div class="container device" style="width: 75%;padding: 0;margin: 0;">
                                <div class="deviceLeft" style="width: 220px;margin-left: 5px;height: 600px;">
                                    <h3>配置1</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node1css" data-type="server">开始</div>
                                    </div>
                                    <h3>配置2</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node4css" data-type="route">双击选择</div>
                                    </div>
                                    <h3>配置3</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node5css" data-type="signal">结束</div>
                                    </div>
                                </div>
                                <div id="deviceRight" style="height: 600px;">
                                    <div id="main">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../static/system_setup/flow_cerate/js/jquery.jsPlumb.min.js"></script>
<script type="text/javascript" src="../../static/system_setup/flow_cerate/js/index_product.js"></script>
<script>
    function fill_val(obj, ele_id, types = false, job_numbers = false) {
        document.getElementById("new_models").style.display = "table";
        var id = ele_id;
        sessionStorage.clear();
        document.getElementById("an_branch").style.color = "#01aaed";   // 按部门
        document.getElementById("an_role").style.color = "#0b0b0b";     // 按角色
        document.getElementById("an_staff").style.color = "#0b0b0b";     // 按人员
        document.getElementById("all_select_checkbox").checked = false; // 右侧弹框
        var check_box_list = document.getElementsByClassName("check_box");
        document.getElementById("search_button").setAttribute("onclick", "search_data()");
        document.getElementById("an_branch").setAttribute("onclick", "change_left_val(this.id)");    // 按部门
        document.getElementById("an_role").setAttribute("onclick", "change_left_val(this.id)");      // 按角色
        document.getElementById("an_staff").setAttribute("onclick", "change_left_val(this.id)");     // 按人员
        for (var t = 0; t < check_box_list.length; t++) {
            document.getElementById(check_box_list[t].id).checked = false;
        }
        document.getElementById("checked-label").innerHTML = "";

        document.getElementById("model-affirm").setAttribute("onclick", "summit_val1('" + ele_id + "')");
        document.getElementById("model_title").innerText = "选择审批人";

        deltr1();
        document.getElementById("img-display1").style.display = "inline-block";
        if (window.branch_list) {
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = branch_list[i];
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "', " + "this.id" + ")");
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        } else {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/delegation", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.personnel_list = JsonDate["data"];
                        window.emp_info_dict = JsonDate["emp_info_dict"];       // 医院所有人员名称、工号、部门
                        window.people_dict = JsonDate["people_dict"];
                        window.people_dict_new = JsonDate["people_dict_new"];
                        window.branch_list = JsonDate["branch_list"];
                        window.function_list = JsonDate["function_list"];
                        var department_list = document.getElementById("department_list");
                        department_list.innerHTML = "";
                        var ul_tag = document.createElement("ul");
                        ul_tag.style.fontSize = "0";
                        ul_tag.style.margin = "0";
                        ul_tag.style.padding = "0";
                        for (var i = 0; i < JsonDate["branch_list"].length; i++) {
                            var li_tag = document.createElement("li");
                            li_tag.style.fontSize = "14px";
                            li_tag.style.margin = "0";
                            li_tag.style.padding = "0";
                            li_tag.innerHTML = JsonDate["branch_list"][i];
                            li_tag.setAttribute("id", JsonDate["branch_list"][i]);
                            li_tag.setAttribute("onclick", "choice_peopel('" + JsonDate["branch_list"][i] + "', " + "this.id" + ")");
                            li_tag.className = "li-class";
                            ul_tag.appendChild(li_tag);
                            department_list.appendChild(ul_tag);
                        }
                    }
                }
            }
        }
    }

    function choice_peopel(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var emp_info_dict = window.emp_info_dict;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;

        an_branch = document.getElementById(choice_key).innerText

        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    function choice_peopel_3(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var emp_info_dict = window.emp_info_dict;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', '" + chose_id + "')");

        for (var i = 0; i < emp_info_dict[choice_key].length; i++) {
            var elm = emp_info_dict[choice_key]
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            td.innerHTML = "<input id='" + elm[i].real_name + "(" + elm[i].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }

        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 创建右侧选择人员列表   按角色
    function choice_peopel_1(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);      // choice_key为分管领导、科室负责人   id 为0、1
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        document.getElementById("img-display1").style.display = "none";
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
        an_role = document.getElementById(choice_key).innerText
    }

    // 创建右侧选择人员列表
    function choice_peopel_2(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }

        var people_dict_new = window.function_list;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
        for (var i = 0; i < people_dict_new[choice_key].length; i++) {
            var elm = people_dict_new[choice_key];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            td.innerHTML = "<input id='" + elm[i].real_name + '(' + elm[i].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    function create_table1(json_data) {
        var t_table = document.getElementById("t_table1");
        var menu_name = "";
        var mwnu_num = 0;
        var menu_num = 1;
        for (var i = 0; i < json_data.length; i++) {
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            if (json_data[i]["menu"] !== menu_name) {
                menu_name = json_data[i]["menu"];
                mwnu_num += 1;
                menu_num = 1;
                var tr_1 = document.createElement("tr");
                var td_1 = document.createElement("td");
                var td1_1 = document.createElement("td");
                var td2_1 = document.createElement("td");
                var td3_1 = document.createElement("td");
                td_1.innerHTML = '<a href="#" onclick="menu_contraction(\'' + "0" + String(mwnu_num) + '\', \'' + "0" + String(mwnu_num) + '\')"><i id="' + "0" + String(mwnu_num) + '" class="iconfont icon-sanjiaoyou"></i> ' + menu_name + '</a>';
                td_1.style.paddingLeft = "1%";
                td1_1.innerHTML = "0" + String(mwnu_num);
                td1_1.style.paddingLeft = "3.5%";
                td2_1.innerHTML = "有效";
                td2_1.style.textAlign = "center";
                td3_1.innerHTML = '<p onclick="padding_data(\'' + json_data[i]["menu"] + '\')"><i  class="iconfont icon-zhucetianjiahaoyou"></i> 添加</p>';
                td3_1.style.textAlign = "center";
                td3_1.style.color = "#0c6fd9";
                td3_1.style.cursor = "pointer";
                tr_1.appendChild(td_1);
                tr_1.appendChild(td1_1);
                tr_1.appendChild(td2_1);
                tr_1.appendChild(td3_1);
                t_table.appendChild(tr_1);


                tr.className = "0" + String(mwnu_num);
                tr.style.display = "none";
                td.innerHTML = '<a href="#">' + json_data[i]["bill"] + '</a>';
                td.style.paddingLeft = "3%";
                td1.innerHTML = "0" + String(mwnu_num) + "-" + String(menu_num);
                td1.style.paddingLeft = "3.5%";
                td2.innerHTML = "有效";
                td2.style.textAlign = "center";
                td3.innerHTML = '/';
                td3.style.textAlign = "center";
                td3.style.color = "#0c6fd9";
                td3.style.cursor = "pointer";
                menu_num += 1
            } else {
                tr.className = "0" + String(mwnu_num);
                tr.style.display = "none";
                td.innerHTML = '<a href="#">' + json_data[i]["bill"] + '</a>';
                td.style.paddingLeft = "3%";
                td1.innerHTML = "0" + String(mwnu_num) + "-" + String(menu_num);
                td1.style.paddingLeft = "3.5%";
                td2.innerHTML = "有效";
                td2.style.textAlign = "center";
                td3.innerHTML = '/';
                td3.style.textAlign = "center";
                td3.style.color = "#0c6fd9";
                td3.style.cursor = "pointer";
                menu_num += 1
            }

            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
    }

    // 删除列表
    function deltr() {
        var tb = document.getElementById('t_table');
        var rowNum = tb.rows.length;
        for (i = 0; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }

    // 删除列表
    function deltr1() {
        var tb = document.getElementById('t_table2');
        var rowNum = tb.rows.length;
        for (i = 0; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }

    // 删除列表
    function deltr2() {
        var tb = document.getElementById('t_table1');
        var rowNum = tb.rows.length;
        for (i = 0; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }

    // 选择委托人
    function choice_consignor(ele_id, chose_id, choice_key) {
        var check_tag_list = document.getElementsByClassName("check_box");
        for (var t = 0; t < check_tag_list.length; t++) {
            if (check_tag_list[t].id !== ele_id) {
                check_tag_list[t].checked = false
            }
        }

        chose_id = 'executor2';
        if (chose_id === "executor2" || chose_id === "executor4") {
            var dataStr = sessionStorage.getItem(choice_key);
            var dataList = [];
            if (dataStr) {
                sessionStorage.setItem(choice_key, dataStr + ", " + ele_id)
            } else {
                sessionStorage.setItem(choice_key, ele_id)
            }

            if (chose_id === "executor2") {
                var tag_id = "executor_str";
            } else {
                tag_id = "executor_str1";
            }
            var executor_str = document.getElementById(tag_id);
            if (executor_str) {
                if (document.getElementById(ele_id).checked) {
                    if (executor_str.innerText.trim()) {
                        document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + ele_id;
                    } else {
                        document.getElementById(tag_id).innerHTML = ele_id;
                    }
                } else {
                    var str_push = [];
                    var executor_list = executor_str.innerText.split(", ");
                    for (var kl = 0; kl < executor_list.length; kl++) {
                        if (executor_list[kl] !== ele_id) {
                            str_push.push(executor_list[kl])
                        }
                    }
                    document.getElementById(tag_id).innerHTML = str_push.join(", ")
                }
            } else {
                document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + ele_id + "</span>";
            }
        } else {
            check_more_one_not(ele_id);
            document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;'>" + ele_id + "</span>";
        }

    }

    // 复选框全选
    function check_all_select(choice_key, chose_id) {
        var select_check = document.getElementById("all_select_checkbox").checked;
        var all_check_box = document.getElementsByClassName("check_box");
        chose_id = 'executor2'
        if (chose_id === "executor2") {
            var tag_id = "executor_str";
        } else {
            tag_id = "executor_str1";
        }

        var executor_list = [];
        var executor_str = document.getElementById(tag_id);
        if (executor_str) {
            if (executor_str.innerText.trim()) {
                executor_list = executor_str.innerText.split(", ")
            }
        }

        var new_check_val_list = [];
        var check_val_list = [];
        for (var HH = 0; HH < all_check_box.length; HH++) {
            all_check_box[HH].checked = true;
            check_val_list.push(all_check_box[HH].id);
            if (executor_list.lastIndexOf(all_check_box[HH].id) === -1) {
                new_check_val_list.push(all_check_box[HH].id)
            }
        }

        if (select_check) {
            if (chose_id === "executor2" || chose_id === "executor4") {

                if (executor_str) {
                    if (executor_str.innerText.trim()) {
                        document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + new_check_val_list.join(", ");
                    } else {
                        document.getElementById(tag_id).innerHTML = new_check_val_list.join(", ");
                    }

                } else {
                    document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + check_val_list.join(", ") + "</span>";
                }
                sessionStorage.setItem(choice_key, "all" + ", " + check_val_list.join(", "))
            } else {
                alert("该节点不能多选！");
                document.getElementById("all_select_checkbox").checked = false;
            }
        } else {
            sessionStorage.removeItem(choice_key);
            check_val_list = [];
            for (var II = 0; II < all_check_box.length; II++) {
                all_check_box[II].checked = false;
                check_val_list.push(all_check_box[II].id);
            }
            var old_check_val = document.getElementById(tag_id).innerHTML.split(", ");
            for (var TB = 0; TB < check_val_list.length; TB++) {
                removeByValue(old_check_val, check_val_list[TB])
            }

            document.getElementById(tag_id).innerHTML = old_check_val.join(", ");
        }
    };

    function removeByValue(arr, val) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === val) {
                arr.splice(i, 1);
                break;
            }
        }
    };


    // checkBox不允许多选
    function check_more_one_not(ele_id) {
        var check_box_list = document.getElementsByClassName("check_box");
        for (var i = 0; i < check_box_list.length; i++) {
            if (String(check_box_list[i].id) !== String(ele_id)) {
                document.getElementById(check_box_list[i].id).checked = false;
            } else {
                document.getElementById(check_box_list[i].id).checked = true;
            }
        }
    }

    // 选择执行人
    function summit_val(id) {
        var executor111 = '';
        var checked_label = document.getElementById("checked-label");
        for (var j = 0; j < checked_label.children.length; j++) {
            executor111 = executor111 + checked_label.children[j].innerText.trim() + ", ";
        }
        document.getElementById("close-model").click();
        var executor = executor111.slice(0, -2);
        var page = document.getElementsByClassName("active")[0].innerText;
        document.getElementById("loading").style.display = "inline-block";
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP

        xhr.open('get', "/personal-center/bill_group_view?page=" + String(page) + '&id=' + String(id) + '&executor=' + String(executor));
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("loading").style.display = "none";
                    var JsonDate = JSON.parse(xhr.responseText);
                    create_table(JsonDate["count"], JsonDate["bill_groups"]);
                    create_table1(JsonDate["bill_groups"]);
                    pagenum(JsonDate["count"], page);
                }
            }
        };

    }

    (function ($) {
        $.fn.MySelect = function () {
            this.each(function () {
                var $box = $(this);
                var $input = $box.find("input.my-select-input");  //输入框
                var $list = $input.next();                          //ul装扮成下拉框
                var inputHeight = $input.outerHeight();   //计算input输入框的高度和宽度，方便定位ul和设置ul及包裹元素的宽度
                //var inputWidth=$input.innerWidth();
                $list.css({"top": (inputHeight)});
                //$box.width($input.outerWidth());

                $input.focus(function () {   //输入框获得焦点后，显示下拉选择ul
                    var $nextUl = $(this).next();
                    if ($nextUl.children().length > 0) {
                        $(this).next().show();
                    }
                }).bind('input propertychange', function () {  //绑定监测输入框的输入值更改
                    var $this = $(this);
                    $this.attr("data-id", "");
                    var curText = $this.val();
                    var $nextUl = $(this).next();
                    if ($nextUl.children().length > 0) {
                        $nextUl.find("li").removeClass("choosed");
                        $nextUl.find("li").each(function (i, item) {
                            var txt = $(item).text();
                            if (txt === curText) {
                                var v = $(item).attr("data-value");
                                $this.attr("data-id", v);
                                $(item).addClass("choosed");
                            }
                        });
                    }
                });
                $list.off('click', 'li').on('click', 'li', function (e) {
                    var $this = $(this);
                    var value = $this.attr("data-value") || '';
                    $input.val($this.text()).attr("data-id", value);
                    $this.addClass("choosed").siblings().removeClass("choosed");
                    $this.parent().hide();
                });
            });

            $(document).click(function (e) {  //点击.my-select-box范围外时隐藏ul下拉框
                var target = e.target;
                var $target = $(target);
                var $parent = $target.closest('.my-select-box');
                if ($parent.length < 1) {  //说明不是.my-select-box范围内点击，将ul隐藏
                    $(".my-select-list").hide();
                } else if ($parent.length == 1) {  //如果存在多个my-select-box的情况，将其余的非这项以外的都隐藏
                    var $ul = $parent.find(".my-select-list");
                    var flag = $ul.is(":hidden");
                    $(".my-select-list").hide();
                    if (!flag) $ul.show();
                }
            });
            return this;
        }
    })(jQuery);

    $(".my-select-box").MySelect();


    function summit_val1(obj) {
        if (window.id === 'an_role') {
            document.getElementById(obj).innerHTML = an_role
            document.getElementById(obj).dataset.id = 'role'
        } else if (window.id === 'an_branch') {
            document.getElementById(obj).innerHTML = an_branch
            document.getElementById(obj).dataset.id = 'branch'
        } else if (window.id === 'an_staff') {
            var check_box_li = document.getElementsByClassName("check_box");
            for (var i = 0; i < check_box_li.length; i++) {
                if (check_box_li[i].checked) {
                    document.getElementById(obj).innerHTML = check_box_li[i].id
                    document.getElementById(obj).dataset.id = 'staff'
                }
            }
        } else {
            document.getElementById(obj).innerHTML = an_branch
            document.getElementById(obj).dataset.id = 'branch'
        }
        window.id = 'an_branch'
        document.getElementById("new_models").style.display = "none";
        document.getElementById(obj).style.color = 'black'
    }

    // 加载分页条
    function pagenum(dataTotals = 1, page = 1) {
        new myPagination({
            id: 'pagination',
            curPage: page, //初始页码
            pageAmount: 20,  //每页多少条
            dataTotal: dataTotals, //总共多少条数据
            pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数
            pageSize: 5, //可选,分页个数
            showPageTotalFlag: true, //是否显示数据统计
            showSkipInputFlag: true, //是否支持跳转
            getPage: function (page) {
                initialize(page);
            }
        });
    }

    function menu_contraction(contraction_num, Id_e) {
        var Issue_approval = document.getElementsByClassName(contraction_num);
        if (document.getElementById(Id_e).className === "iconfont icon-sanjiaoyou") {
            document.getElementById(Id_e).className = "iconfont icon-sanjiaoxia";
        } else {
            document.getElementById(Id_e).className = "iconfont icon-sanjiaoyou"
        }

        if (Issue_approval.length !== 0 && Issue_approval[0].style.display === "table-row") {
            for (var i = 0; i < Issue_approval.length; i++) {
                Issue_approval[i].style.display = "none";
            }
        } else {
            for (var j = 0; j < Issue_approval.length; j++) {
                Issue_approval[j].style.display = "table-row";
            }
        }
    }

    function change_left_val(ele_id) {
        window.id = ele_id
        if (ele_id === "an_role") {                                             // 按角色
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_staff").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            document.getElementById('right_role_li').style.display = 'none'
            document.getElementById('department_list').style.display = 'inline-block'
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var new_branch_list = ["分管领导:FGLD", "科室负责人:KSFZR"];
            var new_department_list = document.getElementById("department_list");
            var new_ul_tag = document.createElement("ul");
            new_ul_tag.style.fontSize = "0";
            new_ul_tag.style.margin = "0";
            new_ul_tag.style.padding = "0";
            for (var EF = 0; EF < new_branch_list.length; EF++) {
                var new_li_tag = document.createElement("li");
                new_li_tag.style.fontSize = "14px";
                new_li_tag.style.margin = "0";
                new_li_tag.style.padding = "0";
                new_li_tag.style.paddingLeft = "5%";
                new_li_tag.innerHTML = new_branch_list[EF].split(":")[0];
                new_li_tag.setAttribute("onclick", "choice_peopel_1('" + new_branch_list[EF].split(":")[1] + "', " + "this.id" + ")");
                new_li_tag.setAttribute("id", new_branch_list[EF].split(":")[1]);
                new_li_tag.className = "li-class";
                new_ul_tag.appendChild(new_li_tag);
                new_department_list.appendChild(new_ul_tag);
            }
        } else if (ele_id === 'an_staff') {     // 按人员
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_role").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            document.getElementById('right_role_li').style.display = 'inline-block';
            document.getElementById('department_list').style.display = 'inline-block';
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var department_list_1 = document.getElementById("department_list");
            department_list_1.innerHTML = "";
            var ul_tag_1 = document.createElement("ul");
            ul_tag_1.style.fontSize = "0";
            ul_tag_1.style.margin = "0";
            ul_tag_1.style.padding = "0";
            var function_list = window.branch_list;

            for (var i = 0; i < function_list.length; i++) {
                var new_li_1 = document.createElement("li");
                new_li_1.style.fontSize = "14px";
                new_li_1.style.margin = "0";
                new_li_1.style.padding = "0";
                new_li_1.innerHTML = function_list[i];
                new_li_1.setAttribute("id", function_list[i]);
                new_li_1.setAttribute("onclick", "choice_peopel_3('" + function_list[i] + "', " + "this.id" + ")");
                new_li_1.className = "li-class";
                ul_tag_1.appendChild(new_li_1);
                department_list_1.appendChild(ul_tag_1);
            }
        } else {           // 按部门
            document.getElementById("an_role").style.color = "#0b0b0b";
            document.getElementById("an_staff").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            document.getElementById('right_role_li').style.display = 'none'
            document.getElementById('department_list').style.display = 'inline-block'
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = branch_list[i];
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "', " + "this.id" + ")");
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        }
    }

    function search_data(ele_id) {

        var searchData = document.getElementById("search_data").value;
        let personnel_list = window.personnel_list;
        let emp_info_dict = window.emp_info_dict;
        for (var i in personnel_list) {
            if (personnel_list[i].indexOf(searchData) !== -1) {
                var real_name = searchData;
                var job_number = "";
                for (var t = 0; t < emp_info_dict[i].length; t++) {
                    if (emp_info_dict[i][t]["real_name"] === searchData) {
                        real_name = emp_info_dict[i][t]["real_name"];
                        job_number = emp_info_dict[i][t]["job_number"];
                    }
                }

                deltr1();
                var department_list = document.getElementById("department_list");
                department_list.innerHTML = "";
                var ul_tag = document.createElement("ul");
                ul_tag.style.fontSize = "0";
                ul_tag.style.margin = "0";
                ul_tag.style.padding = "0";
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.style.background = "#A9A9A9";
                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + i + "</p>";
                li_tag.setAttribute("onclick", "choice_peopel('" + i + "')");
                li_tag.setAttribute("id", i);
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
                var t_table = document.getElementById("t_table2");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                td.innerHTML = "<input id='" + real_name + "(" + job_number + ")' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + ele_id + "\"" + ", \"" + i + "\")'>";
                td.style.textAlign = "center";
                td1.innerHTML = 1;
                td1.style.textAlign = "center";
                td2.innerHTML = real_name;
                td2.title = real_name;
                td2.style.textAlign = "center";
                td3.style.textAlign = "center";
                td3.innerHTML = job_number;
                td3.title = job_number;
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                t_table.appendChild(tr);
                document.getElementById("img-display1").style.display = "none";
            }
        }
    }

    function close_models() {
        document.getElementById("new_models").style.display = "none";
    }

    var box = document.getElementById('box');
    var isDown = false;
    var mouse = {};
    box.onmousedown = (e) => {
        isDown = true;
        isDown_1 = false;
        //保存初始位置
        mouse = {
            startX: e.clientX,
            startY: e.clientY,
            offsetLeft: box.offsetLeft,
            offsetTop: box.offsetTop,
        }
    };

    box.onmousemove = (e) => {
        if (!isDown) {
            return
        }
        //计算偏移位置
        var offsetLeft = mouse.offsetLeft + e.clientX - mouse.startX;
        var offsetTop = mouse.offsetTop + e.clientY - mouse.startY;

        //设置偏移距离的范围[0,window.innerWidth - 400]
        offsetLeft = Math.max(0, Math.min(offsetLeft, window.innerWidth - 400));
        offsetTop = Math.max(0, Math.min(offsetTop, window.innerHeight - 400));

        box.style.left = offsetLeft + 'px';
        box.style.top = offsetTop + 'px';

    };
    //当鼠标滑的太快时，容易移出box，所以在window上监听此事件
    window.onmouseup = () => {
        isDown = false;
        box.style.cursor = 'default';
        mouse = null;
    };
</script>
</body>

</html>
